import React from 'react';
import loadable from '@loadable/component'
import { UserOutlined, VideoCameraOutlined, HomeOutlined } from '@ant-design/icons';

const Login = loadable(() => import('../pages/Login'))
const Home = loadable(() => import('../pages/Home'))
const Error = loadable(() => import('../pages/Error'))
const Nav11 = loadable(() => import('../pages/Nav1/Nav11'))
const Nav21 = loadable(() => import('../pages/Nav2/Nav21'))
const Nav22 = loadable(() => import('../pages/Nav2/Nav22'))

const outRoutes = [
    { path: '/login', title: '登录', component: Login },
];

const menuRoutes = [
    {
        path: '/404',
        title: '404',
        hide: true,
        component: Error
    },
    {
        path: '/',
        title: '主页',
        hide: true,
        component: Home
    },
    {
        path: '/home',
        icon: <HomeOutlined />,
        title: '主页',
        component: Home
    },
    {
        path: '/menu1',
        icon: <HomeOutlined />,
        title: '菜单1',
        component: Error
    },
    {
        path: '/menu2',
        icon: <HomeOutlined />,
        title: '菜单2',
        component: Error
    },
    {
        path: '/menu3',
        icon: <HomeOutlined />,
        title: '菜单3',
        component: Error
    },
    {
        path: '/menu4',
        icon: <HomeOutlined />,
        title: '菜单4',
        component: Error
    },
    {
        path: '/nav1',
        icon: <UserOutlined />,
        title: 'Nav1',
        children: [
            {
                path: '/nav11',
                title: 'Nav11',
                component: Nav11,
                // children: [
                //     {
                //         path: '/nav111',
                //         title: 'Nav111',
                //         component: Nav11
                //     }
                // ]
            }
        ]
    },
    {
        path: '/nav2',
        icon: <VideoCameraOutlined />,
        title: 'Nav2',
        children: [
            {
                path: '/nav21',
                title: 'Nav21',
                component: Nav21
            },
            {
                path: '/nav22',
                title: 'Nav22',
                component: Nav22
            }
        ]
    }
];

let menuRouteList = []
const getList = (arr) => {
    arr.forEach(item => {
        !item.children ? menuRouteList.push({ ...item }) : getList(item.children)
    })
}
getList(menuRoutes)
const allRoutes = outRoutes.concat(menuRouteList)

export { outRoutes, menuRoutes, menuRouteList, allRoutes };